<template>
    <v-navigation-drawer permanent>
        <v-tabs
            v-model="tabLeft"
            color="cyan-lighten-2"
            bg-color="grey"
            fixed-tabs
        >
            <v-tab
                v-for="item in itemsLeft"
                :key="item.name"
                :value="item.name"
            >
                {{ item.EN }}
            </v-tab>
        </v-tabs>
        <v-window v-model="tabLeft">
            <v-window-item value="page">
                <ElementMenu></ElementMenu>
            </v-window-item>
            <v-window-item value="component">
                <ComponentBtn></ComponentBtn>
            </v-window-item>
        </v-window>
    </v-navigation-drawer>

    <v-navigation-drawer
        location="right"
        permanent
    >
        <v-tabs
            v-model="tabRight"
            color="cyan-lighten-2"
            bg-color="grey"
            fixed-tabs
        >
            <v-tab
                v-for="item in itemsRight"
                :key="item.name"
                :value="item.name"
            >
                {{ item.EN }}
            </v-tab>
        </v-tabs>
        <v-window v-model="tabRight">
            <v-window-item value="style">
                <ElementStyle></ElementStyle>
            </v-window-item>
            <v-window-item value="interactive">
                <InterActive></InterActive>
            </v-window-item>
        </v-window>
    </v-navigation-drawer>

    <v-main
        class="align-center justify-center"
        style="width: 100%"
        id="main"
    >
        <v-tooltip
            location="bottom"
            :disabled="design.functionIsOk"
        >
            <template v-slot:activator="{ props }">
                <v-tabs
                    v-model="tabCenter"
                    color="cyan-lighten-2"
                    bg-color="grey"
                    fixed-tabs
                    v-bind="props"
                    :style="{
                        cursor: !design.functionIsOk ? 'not-allowed' : 'default'
                    }"
                >
                    <v-tab
                        v-for="item in itemsCenter"
                        :key="item.name"
                        :value="item.name"
                        :disabled="!design.functionIsOk"
                    >
                        {{ item.EN }}
                    </v-tab>
                </v-tabs> </template
            >函数正在执行，暂时无法操作，请稍等...
        </v-tooltip>
        <Canvas ref="canvas"></Canvas>
    </v-main>
</template>

<script>
import ElementMenu from './components/Design/ElementMenu.vue'
import ComponentBtn from './components/Design/ComponentBtn.vue'
import Canvas from './components/Design/Canvas.vue'
import ElementStyle from './components/Design/ElementStyle.vue'
import InterActive from './components/Design/InterActive.vue'
import { useDesignStore, domTreeMap, copyJs } from '../../stores/design'

export default {
    components: {
        ElementMenu,
        ComponentBtn,
        Canvas,
        ElementStyle,
        InterActive
    },
    data() {
        return {
            menu: false,
            design: useDesignStore(),
            tabLeft: '',
            tabCenter: 'page edit',
            tabRight: '',
            itemsLeft: [
                {
                    EN: 'Element',
                    name: 'page'
                },
                {
                    EN: 'Component',
                    name: 'component'
                }
            ],
            itemsRight: [
                {
                    EN: 'Property',
                    name: 'style'
                },
                {
                    EN: 'Interaction',
                    name: 'interactive'
                }
            ],
            itemsCenter: [
                {
                    EN: 'page edit',
                    name: 'page edit'
                },
                {
                    EN: 'js preview',
                    name: 'js preview'
                }
            ]
        }
    },
    watch: {
        tabCenter(newValue, oldValue) {
            // 全局
            // css ==> js: 重构
            // js ==> css: 重构 + 样式恢复
            if (newValue === 'js preview') {
                this.design.currentDomPointer.attr.class =
                    this.design.currentDomPointer.attr.class.replace(
                        'highlighted',
                        ''
                    )
                if (this.design.editCss) {
                    copyJs.copyDomTreeMap = JSON.parse(
                        JSON.stringify(domTreeMap['canvas'])
                    )
                }
                this.design.editCss = false
                this.design.currentDomPointer.attr.class += ' highlighted'
                this.design.rerender('all')
            } else {
                this.design.jsToCss()
                this.tabRight = 'style'
            }
        }
    }
}
</script>
